<html lang="zh"><head>
  <meta charset="UTF-8">
  <title>医院管理系统</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>

  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0f2b48',    // 深蓝主色
            secondary: '#4CAF50',  // 辅助绿色
            accent: '#1b3b5c',     // 强调色
            light: '#e9f1f7',      // 浅色背景
            dark: '#0a1c2f',       // 深色背景
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item {
        @apply flex items-center gap-3 px-4 py-2.5 rounded-lg transition-all duration-200;
      }
      .sidebar-item:hover {
        @apply bg-accent/80 translate-x-1;
      }
      .sidebar-item.active {
        @apply bg-accent font-medium;
      }
      .card {
        @apply bg-white rounded-xl shadow-sm border border-gray-100 p-5 transition-all duration-300 hover:shadow-md;
      }
      .card-header {
        @apply flex justify-between items-center mb-4;
      }
      .btn {
        @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
      }
      .btn-primary {
        @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50;
      }
      .btn-outline {
        @apply border border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-gray-200;
      }
    }
  </style>
</head>
<body class="bg-light font-sans">
<!-- 侧边栏 -->
<div id="sidebar" class="fixed top-0 left-0 h-full w-64 bg-primary shadow-lg z-20 transition-all duration-300">
  <div class="p-5 border-b border-accent">
    <div class="flex items-center gap-3">
      <i class="fa fa-hospital-o text-secondary text-xl"></i>
      <h1 class="text-white font-semibold text-lg">医院管理系统</h1>
    </div>
  </div>

  <nav class="p-4 space-y-1">
    <a th:href="@{/admin/index}" class="sidebar-item text-white active" onclick="loadPage('admin/home')">
      <i class="fa fa-home w-5 text-center"></i>
      <span>首页</span>
    </a>

    <!-- 用户管理 -->
    <div class="mt-4">
      <div class="sidebar-item text-white cursor-pointer group-title" onclick="toggleGroup(this)">
        <div class="flex items-center gap-3">
          <i class="fa fa-users w-5 text-center"></i>
          <span>用户管理</span>
        </div>
        <i class="fa fa-angle-right transition-transform duration-200"></i>
      </div>
      <div class="sub-menu ml-4 mt-1 space-y-1 hidden">
        <a th:href="@{/admin/doctor/list}" onclick="loadPage('admin/doctor/list')" class="sidebar-item text-white/90">
          <i class="fa fa-user-md w-5 text-center text-sm"></i>
          <span>医生用户管理</span>
        </a>
        <a th:href="@{/admin/patient/list}" onclick="loadPage('admin/patient/list')" class="sidebar-item text-white/90">
          <i class="fa fa-user w-5 text-center text-sm"></i>
          <span>患者用户管理</span>
        </a>
      </div>
    </div>

    <!-- 挂号管理 -->
    <div class="mt-4">
      <div class="sidebar-item text-white cursor-pointer group-title" onclick="toggleGroup(this)">
        <div class="flex items-center gap-3">
          <i class="fa fa-file-text w-5 text-center"></i>
          <span>挂号管理</span>
        </div>
        <i class="fa fa-angle-right transition-transform duration-200"></i>
      </div>
      <div class="sub-menu ml-4 mt-1 space-y-1 hidden">
        <a th:href="@{/admin/registration/list}" onclick="loadPage('admin/registration/list')" class="sidebar-item text-white/90">
          <i class="fa fa-calendar-check-o w-5 text-center text-sm"></i>
          <span>挂号信息管理</span>
        </a>
      </div>
    </div>

    <!-- 医院管理 -->
    <div class="mt-4">
      <div class="sidebar-item text-white cursor-pointer group-title" onclick="toggleGroup(this)">
        <div class="flex items-center gap-3">
          <i class="fa fa-hospital-o w-5 text-center"></i>
          <span>医院管理</span>
        </div>
        <i class="fa fa-angle-right transition-transform duration-200"></i>
      </div>
      <div class="sub-menu ml-4 mt-1 space-y-1 hidden">
        <a th:href="@{/admin/drug/list}" onclick="loadPage('admin/drug/list')" class="sidebar-item text-white/90">
          <i class="fa fa-medkit w-5 text-center text-sm"></i>
          <span>药品信息管理</span>
        </a>
        <a th:href="@{/admin/checkItems}" onclick="loadPage('admin/checkItems')" class="sidebar-item text-white/90">
          <i class="fa fa-stethoscope w-5 text-center text-sm"></i>
          <span>检查项目管理</span>
        </a>
        <a th:href="@{/admin/bed/list}" onclick="loadPage('admin/bed/list')" class="sidebar-item text-white/90">
          <i class="fa fa-bed w-5 text-center text-sm"></i>
          <span>病床资源管理</span>
        </a>
        <a th:href="@{/admin/schedule/list}" onclick="loadPage('admin/schedule/list')" class="sidebar-item text-white/90">
          <i class="fa fa-calendar w-5 text-center text-sm"></i>
          <span>医生排班管理</span>
        </a>
      </div>
    </div>

    <!-- 数据统计 -->
    <div class="mt-4">
      <div class="sidebar-item text-white cursor-pointer group-title" onclick="toggleGroup(this)">
        <div class="flex items-center gap-3">
          <i class="fa fa-bar-chart w-5 text-center"></i>
          <span>数据统计</span>
        </div>
        <i class="fa fa-angle-right transition-transform duration-200"></i>
      </div>
      <div class="sub-menu ml-4 mt-1 space-y-1 hidden">
        <a th:href="@{/admin/dataAnalysis}" onclick="loadPage('admin/dataAnalysis')" class="sidebar-item text-white/90">
          <i class="fa fa-line-chart w-5 text-center text-sm"></i>
          <span>数据统计分析</span>
        </a>
      </div>
    </div>
  </nav>

  <!-- 侧边栏底部 -->
  <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-accent">
    <div class="sidebar-item text-white" onclick="loadPage('settings')">
      <i class="fa fa-cog w-5 text-center"></i>
      <span>系统设置</span>
    </div>
  </div>
</div>

<!-- 主内容区域 -->
<div id="mainContent" class="ml-64 min-h-screen flex flex-col transition-all duration-300">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm py-3 px-6 sticky top-0 z-10">
    <div class="flex justify-between items-center">
      <div class="flex items-center gap-3">
        <button class="lg:hidden text-gray-600 focus:outline-none" id="sidebarToggle">
          <i class="fa fa-bars text-xl"></i>
        </button>
        <h2 class="text-xl font-semibold text-gray-800" id="pageTitle">首页</h2>
      </div>

      <div class="flex items-center gap-4">
        <div class="relative">
          <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
            <i class="fa fa-bell-o text-gray-600"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
          </button>
        </div>

        <div class="flex items-center gap-3">
          <div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary">
            <i class="fa fa-user"></i>
          </div>
          <div class="hidden md:block">
            <div class="text-sm font-medium text-gray-800">管理员</div>
            <div class="text-xs text-gray-500">admin@hospital.com</div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 内容区域 - 使用iframe加载内容 -->
  <main class="flex-1 p-6 flex flex-col">
    <div id="loadingIndicator" class="flex items-center justify-center h-full">
      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
    </div>
    <iframe id="mainFrame" src="home.html" class="w-full flex-1 border-none"></iframe>
  </main>

  <!-- 页脚 -->
  <footer class="bg-white py-4 px-6 border-t border-gray-200 text-center text-sm text-gray-500">
    <p>© 2025 医院管理系统 | 技术支持：308宿舍科技</p>
  </footer>
</div>

<script>
  // 侧边栏分组切换
  function toggleGroup(element) {
    const subMenu = element.nextElementSibling;
    subMenu.classList.toggle('hidden');
    const icon = element.querySelector('i.fa-angle-right');
    if (subMenu.classList.contains('hidden')) {
      icon.style.transform = 'rotate(0deg)';
    } else {
      icon.style.transform = 'rotate(90deg)';
    }
  }

  // 加载页面内容到iframe
  function loadPage(pageName) {
    // 更新侧边栏活动状态
    document.querySelectorAll('.sidebar-item').forEach(item => {
      item.classList.remove('active');
    });

    // 设置点击的菜单项为活动状态
    const clickedItem = event.currentTarget;
    clickedItem.classList.add('active');

    // 更新页面标题
    const pageTitle = clickedItem.querySelector('span').textContent;
    document.getElementById('pageTitle').textContent = pageTitle;

    // 显示加载指示器
    const loadingIndicator = document.getElementById('loadingIndicator');
    const mainFrame = document.getElementById('mainFrame');

    loadingIndicator.style.display = 'flex';
    mainFrame.style.display = 'none';

    // 模拟加载延迟
    setTimeout(() => {
      // 更新iframe内容
      mainFrame.src = `/${pageName}`;

      // 隐藏加载指示器，显示iframe
      mainFrame.onload = () => {
        loadingIndicator.style.display = 'none';
        mainFrame.style.display = 'block';
      };
    }, 300);

    // 阻止默认行为
    event.preventDefault();
  }

  // 页面加载完成后初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 隐藏加载指示器
    document.getElementById('loadingIndicator').style.display = 'none';
    document.getElementById('mainFrame').style.display = 'block';

    // 侧边栏切换功能
    document.getElementById('sidebarToggle').addEventListener('click', function() {
      const sidebar = document.getElementById('sidebar');
      const mainContent = document.getElementById('mainContent');

      if (sidebar.classList.contains('w-64')) {
        sidebar.classList.remove('w-64');
        sidebar.classList.add('w-0');
        mainContent.classList.remove('ml-64');
        mainContent.classList.add('ml-0');
      } else {
        sidebar.classList.remove('w-0');
        sidebar.classList.add('w-64');
        mainContent.classList.remove('ml-0');
        mainContent.classList.add('ml-64');
      }
    });
  });
</script>


</body></html>